<template>
    <div class="photowall about pd20 bgf">
        <div class="title flexbox-h align-c just-c">
            <h3>照片墙</h3>
        </div>
        <!-- <div class="bg">
            <img src="@/assets/img/about.jpg" alt="" title="程序猿">
        </div> -->
    <div class="imgs-list clearfix" :style="{background: `url(${getBgUrl()}) center/cover no-repeat`}">
        <!-- :class="{bgc: Math.floor((Math.random() * picData.length - 1)) === index}"  -->
        <div
        class="imgs-list-item fl"
        :class="{light: getLightStyle(img, index), dark: getDarkStyle(img, index)}"
        v-for="(img, index) in picData"
        :key="index"
        >
            <div class="img" >
                <el-image
                fit="cover"
                :initial-index="index"
                :src="img.url"
                :preview-src-list="[img.realUrl]"
                :style="{...img.style}"
                lazy
                alt=""
                ></el-image>
            </div>
        </div>
    </div>
    <div class="more-btn" v-if="total > picData.length" @click="loadingMore">
        <i v-if="loadingText === '加载中...'" class="el-icon-loading mr10"></i>
        {{ loadingText }}
    </div>
    </div>
</template>

<script>
export default {
    transition: {
        name: 'page',
        mode: 'out-in'
    },
    head () {
        return {
            title: this.title,
            meta: [
                { charset: 'utf-8' },
                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                { hid: '关于我', name: 'aboutme', content: 'aboutme' }
            ]
        }
    },
    data () {
        return {
            aboutData: {
                technology: {
                    name: '',
                    value: ''
                }
            },
            pageno: 1,
            // picData: [],
            loadingText: '点击或下拉加载更多 >',
            title: '关于我'
        }
    },
    async asyncData ({ app, store }) {
        await store.dispatch('theme/getData', { pageno: 1, count: 16 })
    },
    computed: {
        picData () {
            return this.$store.state.theme.picData
        },
        total () {
            return this.$store.state.theme.total
        }
    },
    mounted () {
    },
    methods: {
        // 偶数行偶数列，奇数行奇数列高亮
        getLightStyle (row, index) {
            // console.log(row, 'row')
            return (row.odd && row.even) || (!row.odd && !row.even)
        },
        getDarkStyle (row, index) {
            // console.log(row, 'row')
            return row.odd && !row.even
        },
        getBgUrl () {
            let len = this.picData.length
            if (!len) return ''
            let url = this.picData[Math.floor(Math.random() * len)].realUrl
            return url || this.picData[0] || this.picData[0].url || ''
        },
        loadingMore () {
            this.pageno++
            this.loadingText = '加载中...'
            this.$store.dispatch('theme/loadingMore', {
                old_id: this.cateIndex,
                category: this.cateIndex || 'unsplash',
                pageno: this.pageno,
                count: this.count
            }).then(res => {
                this.loadingText = '点击或下拉加载更多 >'
            })
        }
    }
}
</script>

<style lang='less' scoped>
.photowall {
    width: 1200px;
    min-height: 700px;
    background: rgba(0, 0, 0, 0.8);
    overflow: auto;
    &.about .title h3 {
        color: @c-ccc;
    }
    .imgs-list {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        background-size: contain;
        background-position: center;
        background-attachment: fixed;
        .imgs-list-item {
            // box-shadow: 2px 2px 2px #999;
            // display: inline-block;
            // background: @c-333;
            // width: 386px;
            // height: 260px;
            width: 290px;
            // height: 210px;
            height: auto;
            overflow: hidden;
            position: relative;
            .img {
                transform: scale(1);
                height: 100%;
                transition: all .5s .2s;
                .el-image {
                    height: 100%;
                    display: block;
                }
                /deep/ img {
                    max-width: 100%;
                    height: 100%;
                    transition: all .5s .2s;
                    animation: fadeIn 1.2s both;
                    filter: brightness(0.3);
                }
            }
            &:hover {
                /deep/ .img {
                    transform: scale(1.5);
                    img {
                        filter: brightness(1);
                    }
                }
            }
            &.light {
                /deep/ img {
                    filter: brightness(1);
                    // animation-delay: 1s;
                }
            }
            &.dark {
                /deep/ img {
                    filter: brightness(0.3);
                    // animation-delay: 0.5s;
                }
            }
        }
    }
    .more-btn {
        text-align: center;
        line-height: 32px;
        color: @white;
        &:hover {
            color: @primary;
            cursor: pointer;
        }
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>
